<template>
  <div class="vote-item">
    <div class="img-wrapper">
      <img :src="isM ? item.m_url : item.url" alt="" class="img">
    </div>
    <div class="btn" @click="vote(category, item.name)">投票</div>
  </div>
</template>
<script>
  const categoryArray = ['年度卓越银行', '年度最具影响力银行品牌', '年度卓越公募基金', '年度最具影响力基金品牌', '年度卓越VC机构', '年度卓越私募基金', '年度卓越证券机构', '年度卓越信托机构', '年度卓越期货机构', '年度卓越财富管理机构', '年度卓越金融科技机构']
  function sendVote(category, name) {
    function hasVoted() {
      let votedItems = localStorage.getItem('votedItems')
      if (!votedItems) {
        return false
      } else {
        votedItems = JSON.parse(votedItems)
        const votedItem = votedItems.find(item => item.category === category)
        if (votedItem && votedItem.items.indexOf(name) !== -1) {
          return true
        } else {
          return false
        }
      }
    }

    function setVote() {
      const votedItems = localStorage.getItem('votedItems') ? JSON.parse(localStorage.getItem('votedItems')) : []

      const votedItem = votedItems.find(item => item.category === category)

      if (votedItem) {
        votedItem.items.push(name)
      } else {
        votedItems.push({category, items: [name]})
      }

      localStorage.setItem('votedItems', JSON.stringify(votedItems))
    }

    function state_Change() {
      if (xmlhttp.readyState == 4) {
        if (xmlhttp.status == 200) {
          alert('投票成功')
          setVote()
        } else {
          alert('金数据接口错误')
        }
      }
    }
    // const categoryIndex = categoryArray.indexOf(category) + 14
    // const field = `field_${categoryIndex}`
    if (hasVoted()) {
      alert('已投票')
    } else {
      var xmlhttp = new XMLHttpRequest()
      var params = `?form_id=vqgpcy&field_26=${category}&field_25=${name}`
      var url = `https://activity.wallstreetcn.com/app/form.php${params}`
      xmlhttp.onreadystatechange = state_Change
      xmlhttp.open('GET', url, true)
      xmlhttp.send(null)
    }
  }
  export default {
    props: ['item', 'category', 'isM'],
    methods: {
      vote(category, name) {
        sendVote(category, name)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .vote-item {
    margin-bottom: 50px;
    display: inline-block;
    width: 166px;
    .img-wrapper {
      display: flex;
      height: 80px;
      align-items: center;
    }
    .img {
      display: block;
      width: 100%;
      margin: 0px auto;
    }
    .btn {
      background-image: linear-gradient(-179deg, #F2D4AA 0%, #CC913D 100%);
      border-radius: 2px;
      text-align: center;
      font-size: 16px;
      color: #402500;
      height: 40px;
      width: 110px;
      line-height: 40px;
      margin: 0px auto;
      cursor: pointer;
    }
  }
  @media screen and (max-width: 500px) {
    .vote-item {
      width: 50%;
      margin-bottom: 15px;
      .img-wrapper {
        height: 65px;
      }
      .btn {
        width: 80px;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
      }
    }
  }
</style>

